<template>
  <div class="BlogDetail-container">
    <h1>{{ blog.title }}</h1>
    <!-- aside 表示附加信息 -->
    <div class="aside">
      <span>日期: {{ formatDate(blog.createDate) }}</span>
      <span>浏览: {{ blog.scanNumber }}</span>
      <a href="#data-form-container">评论: {{ blog.commentNumber }}</a>
      <!-- <a href=""></a> -->
      <router-link
        :to="{
          name: 'categoryBlog',
          params: {
            categoryId: blog.category ? blog.category.id : '',
          },
        }"
        >{{ blog.category && blog.category.name }}</router-link
      >
    </div>
    <div v-html="blog.htmlContent" class="markdown-body"></div>
  </div>
</template>

<script>
import formatDate from "@/utils/formatDate.js";
import "@/assets/style/markdown.css";
import "highlight.js/styles/github.css";
export default {
  props: {
    blog: {
      type: Object,
      required: true,
    },
  },
  data: () => ({}),
  methods: {
    formatDate,
  },
};
</script>

<style lang='less' scoped>
@import "~@/assets/style/var.less";
.aside {
  font-size: 12px;
  color: @gray;
  span,
  a {
    margin-right: 15px;
  }
}
.markdown-body {
  margin: 2em 0;
}
</style>
